<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/> 
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="x5-fullscreen" content="true">
		<link href="../css/bootstrap.min.css" rel="stylesheet"/>
		<link href="../css/modal-bg.css" rel="stylesheet" />
		
		<script type="text/javascript" src="../js/sliding.js" ></script>
		<script>
			function showDiv(id) {
				$('#'+id).fadeIn();
				//document.getElementById(id).fadeIn();
			};
			
			function closeDiv(id) {
				$('#'+id).fadeOut();
			};
		</script>
		
		
		<title>用户列表</title>
	</head>
	<body>
		<div class="page-header" style="height: 50px;margin: 0px;">
			<h1 align="center">用户列表</h1>
		</div>	

		<div id="modalzhang" class="modal-bg" style="display:none ;">
			<div id="modal" class="table-responsive">
				<span>张某某<a href="#close" id="close" onclick="closeDiv('modalzhang')">×</a></span>
				<div id="" style="margin-top: 5px;margin-left: 5px;margin-right: 5px;">
					<table class="table table-striped table-bordered">
						<tr>
						  <td width="20%">姓名</td>
						  <td width="30%">张某某</td>
						  <td width="20%">性别</td>
						  <td width="30%">男</td>
						</tr>
						
						<tr>
						  <td>出生日期</td>
						  <td>1985-09-08</td>
						  <td>职业</td>
						  <td>设计师</td>
						</tr>
						
						<tr>
						  <td>身份证号</td>
						  <td colspan="3">610322198509083333</td>
						</tr>
						
						<tr>
						  <td>单位</td>
						  <td colspan="3">西安中软国际股份有限公司</td>
						</tr>
						
						<tr>
						  <td>家庭住址</td>
						  <td colspan="3">西安雁塔区双水磨小区</td>
						</tr>
						
						<tr>
						  <td>客户描述</td>
						  <td colspan="3">钱此人很有钱很有钱很有钱此人很有钱很有钱很有钱此人很有钱很有钱很有钱此人很有钱很有钱很有钱此人很有钱很有钱很有钱此人很有钱很有钱很有钱此人很有钱很有钱很有钱此人很有钱很有钱很有钱</td>
						</tr>
						
						<tr>
						  <td>备注</td>
						  <td colspan="3">明天去访问一下</td>
						</tr>
						
						<tr>
						  <td align="center" colspan="4"><button class="btn btn-success">查看购买的产品</button></td>
						</tr>
					</table>				
				</div>
			</div>
		</div>

		<div class="list-group">
			<li class="list-group-item active" onclick="showDiv('modalzhang')">
				<span class="badge">1985-09-08</span><h4 class="list-group-item-heading">张某某</h4>
				<span class="badge">
					<a href="tel://13888888888"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
					13888888888</span></a>
					<p class="list-group-item-text">性别：男  职业：设计师  单位：中软国际</p>
			</li>
		</div>

		<div class="container"> 
			<nav class="navbar navbar-default navbar-fixed-bottom">
				<div class="btn-group btn-group-lg" role="group" aria-label="..." style="width: 100%;">
						<button type="button" class="btn btn-default col-xs-4">主页</button>
						<button type="button" class="btn btn-default col-xs-4">客户</button>
						<button type="button" class="btn btn-default col-xs-4">个人</button>
				</div>
			</nav>
		</div>
		
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</body>
</html>
